<!--  -->
<template>
  <div>
    <div>
      <!-- <el-form ref="form" :inline="true" :model="selectParam" class="demo-form-inline"> -->
        <!-- <el-form-item label="填报批次：">
          <el-select v-model="selectParam.applyBatch" placeholder="请选择">
            <el-option
              v-for="item in formData.applyBatch"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="就读地区：">
          <el-select
            v-model="selectParam.area"
            placeholder="请选择"
          ></el-select>
        </el-form-item>
        <el-form-item label="大学类型：">
          <el-select
            v-model="selectParam.collegeType"
            placeholder="请选择"
          ></el-select>
        </el-form-item>
        <el-form-item label="专业类别：">
          <el-select
            v-model="selectParam.major"
            placeholder="请选择"
          ></el-select>
        </el-form-item>
        <div /> -->
        <!-- <el-form-item label="搜索大学：">
          <el-autocomplete
            v-model="collegeName"
            :fetch-suggestions="queryCollege"
            placeholder="请输入内容"
            @select="handleSelect"
          ></el-autocomplete> -->
          <!-- <el-input v-model="selectParam.collegeName" placeholder="请输入"> <el-button slot="append" icon="el-icon-search"></el-button></el-input> -->
        <!-- </el-form-item>
        <el-form-item label="搜索专业：">
          <el-autocomplete
            v-model="majorName"
            :fetch-suggestions="queryMajor"
            placeholder="请输入内容"
            @select="handleSelect"
          ></el-autocomplete>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">添加</el-button>
          <el-button type="primary" @click="eva" v-if="isVis">评估</el-button>
        </el-form-item>
      </el-form> -->
    </div>
    <div>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane :label="'本科批次' + collTotal + '/96'" name="underGra">
          <under-gra :tableData="tableData" @query="queryData" />
        </el-tab-pane>
        <el-tab-pane :label="`专科批次 ${speTotal}/96`" name="special">
          <under-gra :tableData="specialData" @query="queryData" />
        </el-tab-pane>
        <div style=" text-align: center;">
          <a-pagination :total="total" @change="next"> </a-pagination>
        </div>
      </el-tabs>
    </div>
    <!-- <evaluate :isVisible="isShow" @update:isShow="changeShow" v-if="isVis" /> -->
  </div>
</template>

<script>
import UnderGra from './tableData/UnderGra.vue'
import { list } from '@/api/college/college'
import { listAs, add } from '@/api/aspiration/aspiration'
// import Evaluate from './dialog/Evaluate.vue'
export default {
  components: { UnderGra },
  data() {
    return {
      collTotal: 0,
      speTotal: 0,
      isShow: false,
      collegeName: '',
      majorName: '',
      count: 0,
      total: 0,
      pageNum: 1,
      selectParam: {
        applyBatch: '',
        area: '',
        collegeType: '',
        major: '',
        collegeName: '',
        majorName: '',
        total: 0
      },
      tableData: [],
      specialData: [],
      formData: {
        applyBatch: [
          { label: '本科批', value: '0' },
          { label: '专科批', value: '1' }
        ]
      },
      activeName: 'underGra',
      insCharacter: ''
    }
  },
  watch: {
    activeName: {
      immediate: true,
      handler(newVal, oldVal) {
        this.collegeName = ''
        this.majorName = ''
        if (newVal == 'underGra') {
          this.insCharacter = '本科'
        } else {
          this.insCharacter = '专科'
        }
        this.queryData()
      }
    }
  },
  mounted() {
    // this.queryData()
  },
  computed: {
    isVis() {
      const user = JSON.parse(localStorage.getItem('user'))
      if (user.num != null) {
        return true
      }
      return false
    }
  },
  methods: {
    next(page) {
      this.pageNum = page
      this.queryData()
    },
    queryData() {
      // console.log("==")
      // console.log(JSON.parse(localStorage.getItem('user')))
      listAs({
        userId: JSON.parse(localStorage.getItem('user')).id,
        type: this.insCharacter,
        pageSize: 10,
        pageNum: this.pageNum
      }).then(res => {
        console.log(this.insCharacter)
        if (this.insCharacter == '本科') {
          console.log('===')
          this.tableData = res.rows
          this.collTotal = res.total
          // this.speTotal = 0
        } else {
          console.log('zhun')
          this.specialData = res.rows
          this.speTotal = res.total
          // this.collTotal = 0
        }
        this.total = res.total
      })
    },
    queryMajor(str, cb) {
      if (this.collegeName) {
        const data = []
        list({ name: this.collegeName }).then(res => {
          // console.log(res)
          const major = res.rows[0].fields
          major.split(',').forEach(item => data.push({ value: item }))
          // console.log(data)
          cb(data)
        })
      }
    },
    queryCollege(str, cb) {
      const data = []
      list({ name: str, insCharacter: this.insCharacter }).then(res => {
        res.rows.forEach(item => {
          data.push({ value: item.name })
        })
        cb(data)
      })
    },
    handleSelect(item) {
      console.log(item)
    },

    handleClick() {
      // this.changeIsShow(true)
    },
    onSubmit() {
      if (this.collegeName && this.majorName) {
        add({
          userId: JSON.parse(localStorage.getItem('user')).id,
          collage: this.collegeName,
          field: this.majorName,
          type: this.insCharacter
        }).then(res => {
          this.$msg.success('添加成功')
          this.queryData()
        })
      }
    },
    changeShow(v) {
      this.isShow = v
    },
    eva() {
      this.isShow = true
    }
  }
}
</script>

<style scoped></style>
